<template>
  <div class="app-container">
    <div class="app-title">
      <span>接收单位数据</span>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-col :span="1">
          <i :class="[treeShow ? 'el-icon-s-fold treeI' : 'el-icon-s-unfold treeI']" @click="toggerTree" />
        </el-col>
        <div class="tap-fillet">
          <el-radio-group v-model="activeName" style="margin-left:4rem; width:700px; height:15px; margin-top:-57px ">
            <el-radio-button label="0" name="noAudit">未接收</el-radio-button>
            <el-radio-button label="1" name="isAudit">已接收</el-radio-button>
          </el-radio-group>
        </div>
      </el-col>
      <div class="filter-container">
        <div>
          <el-col style="text-align:right;margin-top: -3px;" :span="16">
            <el-button size="small" class="filter-item" style="margin-left: 10px;" type="primary" @click="Query">
              查询
            </el-button>
            <el-button size="small" class="filter-item" style="margin-left: 10px;width:130px" type="primary"
              @click="unitReportQuery">
              单位上报情况查询
            </el-button>
            <el-button v-if="activeName == '0'" size="small" font-size="14px" class="filter-item"
              style="margin-left: 10px;" type="primary" :loading="handleLoading" @click="handle">
              接收
            </el-button>
            <el-button v-if="activeName == '0'" size="small" class="filter-item" type="primary" :loading="BackLoading"
              @click="Reject">
              退回
            </el-button>
            <el-button v-if="activeName == '1'" size="small" class="filter-item" style="margin-left: 10px;"
              type="primary" :loading="ConfirmLoading" @click="Confirm">
              撤销接收
            </el-button>
            <el-button size="small" class="filter-item" style="margin-left: 10px;" type="primary" @click="processnode">
              审核日志
            </el-button>
          </el-col>
        </div>
      </div>
    </el-row>
    <div>
      <div style="margin-left:165px; position:absolute; margin-top:-39px">
        <img style="width:16px; height:16px;" :src="Processedimg">
      </div>
      <div style="margin-left:75px; position:absolute; margin-top:-39px">
        <img style="width:16px; height:16px;" :src="Untreatedimg">
      </div>
    </div>

    <div ref="box" class="box">
      <div class="left" :class="[isActive ? 'wid' : 'wids']">
        <div :class="[treeShow ? 'treeShow' : 'treeNotShow']" :style="{ 'height': treeHeight + 'px' }">
          <AgencyTree class="agencyTree" @handleTreeQuery="handleTreeQuery" />
        </div>
      </div>
      <div v-show="Show" class="resize" title="收缩侧边栏" />
      <div class="mid" :class="[isActive ? 'mids' : 'min']">
        <financialVerifyChildren :key="timer" ref="chil" :tab-pane="activeName" @handleCallback="handleCallback()"
          @BackCallBack="BackCallBack()" @ConfirmCallBack="ConfirmCallBack()" />
      </div>
      <Drag ref="icon" />

    </div>
  </div>
</template>

<script>
import financialVerifyChildren from '@/views/salaryReport/children/financialVerifyChildren'
import AgencyTree from '@/components/tree/agencyTree'
import Drag from '@/components/Drag'
export default {
  name: 'FinancialVerify',
  components: { financialVerifyChildren, AgencyTree, Drag },
  data() {
    return {
      treeHeight: null,
      Show: false,
      isActive: true,
      treeShow: false,
      handleLoading: false,
      BackLoading: false,
      ConfirmLoading: false,
      timer: '',
      activeName: '0',
      isThirteens: '',
      batchs: [],
      Untreatedimg: require('@/assets/images/select.png'),
      Processedimg: require('@/assets/images/processed.png')

    }
  },
  watch: {
    activeName(val) {
      this.timer = new Date().getTime()
      if (val === '0') {
        this.Processedimg = require('@/assets/images/processed.png')
        this.Untreatedimg = require('@/assets/images/select.png')
      } else {
        this.Processedimg = require('@/assets/images/blue.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
      }
    }
  },
  created() {
  },
  mounted() {
    this.dragController()
    this.getTeHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTeHeight)
  },
  methods: {
    processnode() {
      this.$refs.chil.processnode()
    },
    getTeHeight() {
      this.treeHeight = window.innerHeight - 270
    },
    // 拖拽
    dragController() {
      this.$refs.icon.dragControllerDiv()
    },
    childrenLoad(tab) {
      if (tab.name === 'noAudit') {
        this.noAudit = true
        this.isAudit = false
      } else if (tab.name === 'isAudit') {
        this.noAudit = false
        this.isAudit = true
      }
      this.timer = new Date().getTime()

      console.info(this.timer)
    },
    // 树方法
    handleTreeQuery(data) {
      this.$refs.chil.handleTree(data)
    },
    // 树显隐方法
    toggerTree() {
      this.treeShow = !this.treeShow
      this.isActive = !this.isActive
      this.Show = !this.Show
    },
    handle() {
      this.handleLoading = true
      this.$refs.chil.handleConfirm()
    },
    handleCallback() {
      this.handleLoading = false
    },
    Back() {
      this.BackLoading = true
      this.$refs.chil.sendBack()
    },
    Reject() {
      this.$refs.chil.auditReject()
    },
    BackCallBack() {
      this.BackLoading = false
    },
    Confirm() {
      this.ConfirmLoading = true
      this.$refs.chil.undoConfirm()
    },
    ConfirmCallBack() {
      this.ConfirmLoading = false
    },
    Query() {
      this.$refs.chil.Query()
    },
    unitReportQuery() {
      this.$refs.chil.unitReportQuery()
    }

  }

}
</script>

<style scoped lang="scss" >
@import "~@/styles/border.scss";
/*引入公共样式*/

.app-title {
  margin-bottom: 15px;
  height: 20px;
  border-bottom: 1px solid #DCDFE6;
}
</style>
